import React, { Component } from 'react'
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom'

export default class ReactRouter extends Component {

    render() {
        return <>
            <h3>Router练习</h3>

            {/* 路由写在这里 */}
            <Router>
                {/* link相当于a标签，to相当于href */}
                <Link to='/' >首页</Link>
                <Link to='/user' >用户列表</Link>
                <Link to='/goods' >商品列表</Link>
                <hr />
                {/* Switch把Route包裹起来，可以让路由渲染到第一个合适的就停下来。 */}
                <Switch>
                    {/* Route是路由匹配规则，也是路由出口，path是匹配路径，component是要渲染的组件 */}
                    {/* exact是精确渲染，否则“/user”等路由会匹配到多个以“/”开头的规则 */}
                    <Route path='/' exact component={Home} />
                    <Route path='/user' component={User} />
                    {/* children的值是个返回jsx的函数，和component互斥且优先级更高，无论匹配到任何路由都会渲染 */}
                    <Route path='/goods' component={Goods} children={() => <div>children渲染函数</div>} />
                    {/* render的值是个返回jsx的函数，和component互斥但优先级更低，匹配到才会渲染 */}
                    <Route path='/goods' render={() => <div>render渲染函数</div>} />
                    {/* 不写path，前面的匹配不到就会渲染这个路由 */}
                    <Route component={Empty} />
                </Switch>
            </Router>
        </>
    }
}

class Home extends Component {
    render() {
        return <>
            <h3>首页页面</h3>
        </>
    }
}
class User extends Component {
    render() {
        return <h3>用户列表页面</h3>
    }
}
class Goods extends Component {
    render() {
        return <h3>商品列表页面</h3>
    }
}
class Empty extends Component {
    render() {
        return <h3>404 页面不见了……</h3>
    }
}












